<template>
  <div class="artCate-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章分类</span>
        <el-button
          style="float: right; padding: 10px 20px"
          type="primary"
          @click="dialogVisible = true"
          >添加</el-button
        >
      </div>
      <div>
        <el-table border style="width: 100%" :data="tableData">
          <el-table-column label="序号" width="180" type="index"> </el-table-column>
          <el-table-column prop="cate_name" label="分类名称" width="180"> </el-table-column>
          <el-table-column prop="cate_alias" label="分类别名"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                style="padding: 10px 20px"
                @click="showEdit(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                style="padding: 10px 20px"
                @click="removeFn(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- Dialog弹出框 -->
      <el-dialog
        :title="isEdit === true ? '修改文章分类' : '添加文章分类'"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <!-- 添加分类表单区域 -->
        <el-form ref="artListForm" :model="artList" class="ipt-box" :rules="rules">
          <el-form-item prop="cate_name" label="分类名称">
            <el-input v-model="artList.cate_name"></el-input>
          </el-form-item>
          <el-form-item prop="cate_alias" label="分类别名">
            <el-input v-model="artList.cate_alias"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFn">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getArtListAPI, addArtListAPI, removeArtListAPI, updateArtListAPI } from '@/api'
export default {
  data() {
    return {
      tableData: [],
      // 控制弹出层显示隐藏
      dialogVisible: false,
      // 是否是编辑状态
      isEdit: false,
      artList: {
        // 分类名称
        cate_name: '',
        // 分类别名
        cate_alias: ''
      },
      rules: {
        // 分类名称规则
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          {
            pattern: /^\S{1,10}$/,
            message: '分类名必须是1-10位的非空字符',
            trigger: ['blur', 'change']
          }
        ],
        // 分类别名规则
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: '分类别名必须是1-15位的字母数字',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 每行对象id
      id: ''
    }
  },
  created() {
    // 初始化文章分类数据
    this.getArtList()
  },
  methods: {
    // 获取文章分类
    async getArtList() {
      const { data } = await getArtListAPI()
      console.log(data)
      this.tableData = data.data
    },
    // 增加或修改文章分类(确认按钮)
    submitFn() {
      // 先进行表单验证，数据确认无误后才执行点击按钮代码
      // eslint-disable-next-line
      this.$refs.artListForm.validate(async (valid) => {
        if (valid) {
          // 增加图书分类状态
          if (!this.isEdit) {
            this.addFn()
          } else {
            // 修改图书分类状态
            this.editFn({ id: this.id, ...this.artList })
          }
          this.dialogVisible = false
        }
      })
    },
    // 增加文章分类
    async addFn() {
      const { data } = await addArtListAPI(this.artList)
      console.log(data)
      if (data.code === 0) {
        this.$message({
          message: '增加文章分类成功!',
          type: 'success'
        })
        /*  push会出bug,因为我直接push了对象，后来发现是因为push对象时，
            指针一直指向的是之前输入框绑定的对象地址，所以输入框下次输入时值
            改变，数组内的值也就变了。 */
        // this.tableData.push(this.artList)

        // 解决方法1:push一个新对象，指向不同地址
        // this.tableData.push({
        //   cate_name: this.artList.cate_name,
        //   cate_alias: this.artList.cate_alias
        // })

        // 解决方法2:JSON的2次转换
        // const artListCopy = JSON.parse(JSON.stringify(this.artList))
        // this.tableData.push(artListCopy)

        // 方法3：通过后台数据直接更新(只能使用该方法，因为后面删除修改业务需要id，只有此方式才能重新获取到id)
        this.getArtList()
      } else {
        this.$message.error('增加文章分类失败!')
      }
    },
    // 删除文章分类
    removeFn(index, row) {
      this.$confirm('此操作将永久删除该文章分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        // eslint-disable-next-line
        .then(async () => {
          const { data } = await removeArtListAPI(row)
          if (data.code === 0) {
            this.$message({
              message: '删除文章分类成功!',
              type: 'success'
            })
            this.tableData.splice(index, 1)
          } else {
            this.$message.error('删除文章分类失败!')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 显示修改页面
    showEdit(index, row) {
      this.dialogVisible = true
      this.isEdit = true
      this.artList.cate_name = row.cate_name
      this.artList.cate_alias = row.cate_alias
      this.id = row.id
    },
    // 修改图书分类
    async editFn(row) {
      const { data } = await updateArtListAPI(row)
      console.log(data)
      if (data.code === 0) {
        this.$message({
          message: '修改文章分类成功!',
          type: 'success'
        })
      } else {
        this.$message.error('修改文章分类失败!')
      }
      // 初始化文章分类数据
      this.getArtList()
    }
  },
  watch: {
    // 监听属性dialogVisible：当Dialog弹出层关闭，自动清空重置form表单里面内容
    dialogVisible(newValue) {
      if (newValue === false) {
        this.artList.cate_name = ''
        this.artList.cate_alias = ''
        // this.$refs.artListForm.resetFields()
        setTimeout(() => {
          this.isEdit = false
        }, 300)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 250px;
}
</style>
